<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>喜欢特效</title>
		<style type="text/css">
			*, *:before, *:after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "liga", "kern";
          font-feature-settings: "liga", "kern";
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}

body {
  overflow: hidden;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #1dd2af;
  background: -webkit-linear-gradient(240deg, #E03BE7, #F04151);
  background: linear-gradient(-150deg, #E03BE7, #F04151);
}

svg {
  height: 100%;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.container {
  position: relative;
  height: 50%;
  width: 50vh;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(25, 25, 25, 0.25);
}

@-webkit-keyframes heart {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  17.5% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}

@keyframes heart {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  17.5% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
#Heart_2_ {
  cursor: pointer;
  will-change: transform;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation: heart 1.8s cubic-bezier(0.17, 0.89, 0.32, 1.49);
          animation: heart 1.8s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

@-webkit-keyframes fadeInDown {
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
#Thanks {
  position: absolute;
  top: 65%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: #13414c;
  font-size: 5vh;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  opacity: 0;
  -webkit-animation: fadeInDown 1s ease-out;
          animation: fadeInDown 1s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

@-webkit-keyframes bubble {
  0%,100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    stroke-width: 0;
    stroke: rgba(233, 172, 193, 0);
  }
  15% {
    fill: #E9ACC1;
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    stroke: #E9ACC1;
    stroke-width: 6;
  }
  100% {
    fill: rgba(233, 172, 193, 0);
  }
}

@keyframes bubble {
  0%,100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    stroke-width: 0;
    stroke: rgba(233, 172, 193, 0);
  }
  15% {
    fill: #E9ACC1;
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    stroke: #E9ACC1;
    stroke-width: 6;
  }
  100% {
    fill: rgba(233, 172, 193, 0);
  }
}
#Circle {
  fill: #E9ACC1;
  will-change: transform;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation: bubble 1.8s cubic-bezier(0.21, 0.61, 0.35, 1);
          animation: bubble 1.8s cubic-bezier(0.21, 0.61, 0.35, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

@-webkit-keyframes particle {
  0%,100% {
    opacity: 0;
  }
  40% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(0);
            transform: translate(0, 0) scale(0);
  }
}

@keyframes particle {
  0%,100% {
    opacity: 0;
  }
  40% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(0);
            transform: translate(0, 0) scale(0);
  }
}
[id*=Particle] {
  will-change: transform;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  opacity: 0;
  -webkit-animation: particle 2.7s cubic-bezier(0.21, 0.61, 0.35, 1);
          animation: particle 2.7s cubic-bezier(0.21, 0.61, 0.35, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}

[id*=Particle]:nth-child(1) {
  -webkit-animation-duration: 1084ms;
          animation-duration: 1084ms;
}

[id*=Particle]:nth-child(2) {
  -webkit-animation-duration: 1095ms;
          animation-duration: 1095ms;
}

[id*=Particle]:nth-child(3) {
  -webkit-animation-duration: 1142ms;
          animation-duration: 1142ms;
}

[id*=Particle]:nth-child(4) {
  -webkit-animation-duration: 1535ms;
          animation-duration: 1535ms;
}

[id*=Particle]:nth-child(5) {
  -webkit-animation-duration: 1309ms;
          animation-duration: 1309ms;
}

[id*=Particle]:nth-child(6) {
  -webkit-animation-duration: 1929ms;
          animation-duration: 1929ms;
}

[id*=Particle]:nth-child(7) {
  -webkit-animation-duration: 1347ms;
          animation-duration: 1347ms;
}

[id*=Particle]:nth-child(8) {
  -webkit-animation-duration: 1310ms;
          animation-duration: 1310ms;
}

[id*=Particle]:nth-child(9) {
  -webkit-animation-duration: 1171ms;
          animation-duration: 1171ms;
}

[id*=Particle]:nth-child(10) {
  -webkit-animation-duration: 1920ms;
          animation-duration: 1920ms;
}

[id*=Particle]:nth-child(11) {
  -webkit-animation-duration: 1279ms;
          animation-duration: 1279ms;
}

[id*=Particle]:nth-child(12) {
  -webkit-animation-duration: 1727ms;
          animation-duration: 1727ms;
}

[id*=Particle]:nth-child(13) {
  -webkit-animation-duration: 1390ms;
          animation-duration: 1390ms;
}

[id*=Particle]:nth-child(14) {
  -webkit-animation-duration: 1724ms;
          animation-duration: 1724ms;
}

[id*=Particle]:nth-child(15) {
  -webkit-animation-duration: 1285ms;
          animation-duration: 1285ms;
}

[id*=Particle]:nth-child(16) {
  -webkit-animation-duration: 1855ms;
          animation-duration: 1855ms;
}

[id*=Particle]:nth-child(17) {
  -webkit-animation-duration: 1317ms;
          animation-duration: 1317ms;
}

[id*=Particle]:nth-child(18) {
  -webkit-animation-duration: 1460ms;
          animation-duration: 1460ms;
}

[id*=Particle]:nth-child(1) {
  -webkit-transform: translate(500%, 500%) scale(0);
          transform: translate(500%, 500%) scale(0);
}

[id*=Particle]:nth-child(2) {
  -webkit-transform: translate(250%, 500%) scale(0);
          transform: translate(250%, 500%) scale(0);
}

[id*=Particle]:nth-child(3) {
  -webkit-transform: translate(0, 500%) scale(0);
          transform: translate(0, 500%) scale(0);
}

[id*=Particle]:nth-child(4) {
  -webkit-transform: translate(-250%, 500%) scale(0);
          transform: translate(-250%, 500%) scale(0);
}

[id*=Particle]:nth-child(5) {
  -webkit-transform: translate(-500%, 500%) scale(0);
          transform: translate(-500%, 500%) scale(0);
}

[id*=Particle]:nth-child(6) {
  -webkit-transform: translate(-500%, 250%) scale(0);
          transform: translate(-500%, 250%) scale(0);
}

[id*=Particle]:nth-child(7) {
  -webkit-transform: translate(-500%, 0%) scale(0);
          transform: translate(-500%, 0%) scale(0);
}

[id*=Particle]:nth-child(8) {
  -webkit-transform: translate(-500%, -250%) scale(0);
          transform: translate(-500%, -250%) scale(0);
}

[id*=Particle]:nth-child(9) {
  -webkit-transform: translate(-500%, -500%) scale(0);
          transform: translate(-500%, -500%) scale(0);
}

[id*=Particle]:nth-child(10) {
  -webkit-transform: translate(-250%, -500%) scale(0);
          transform: translate(-250%, -500%) scale(0);
}

[id*=Particle]:nth-child(11) {
  -webkit-transform: translate(0%, -500%) scale(0);
          transform: translate(0%, -500%) scale(0);
}

[id*=Particle]:nth-child(12) {
  -webkit-transform: translate(250%, -500%) scale(0);
          transform: translate(250%, -500%) scale(0);
}

[id*=Particle]:nth-child(13) {
  -webkit-transform: translate(500%, -500%) scale(0);
          transform: translate(500%, -500%) scale(0);
}

[id*=Particle]:nth-child(14) {
  -webkit-transform: translate(500%, -250%) scale(0);
          transform: translate(500%, -250%) scale(0);
}

[id*=Particle]:nth-child(15) {
  -webkit-transform: translate(500%, 0%) scale(0);
          transform: translate(500%, 0%) scale(0);
}

[id*=Particle]:nth-child(16) {
  -webkit-transform: translate(500%, 250%) scale(0);
          transform: translate(500%, 250%) scale(0);
}

[id*=Particle]:nth-child(17) {
  -webkit-transform: translate(500%, 500%) scale(0);
          transform: translate(500%, 500%) scale(0);
}

[id*=Particle]:nth-child(18) {
  -webkit-transform: translate(500%, 500%) scale(0);
          transform: translate(500%, 500%) scale(0);
}

		</style>
	</head>
	<body>
		<div class="container">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 269 264" style="enable-background:new 0 0 269 264;" xml:space="preserve">
<style type="text/css">
	.st1{fill:#9BB133;}
	.st2{fill:#E7E43B;}
	.st3{fill:#6BABBD;}
	.st4{fill:#38B133;}
	.st5{fill:#E03BE7;}
	.st6{fill:#E9ACC1;}
	.st7{fill:#F04151;}
	.st8{fill:#13414C;}
	.st9{font-family:'Montserrat-Regular';}
	.st10{font-size:23.9043px;}
</style>
<g>
	<path id="Particle" class="st1" d="M84.7,71.5c-4.1-3.6-8.1-3.9-10.1-6.4c-1.2-1.5-1.3-4.2,0.4-5.6s4.6-0.6,5.9,0.5
		C83.8,62.3,82.4,67.1,84.7,71.5z"/>
	<path id="Particle_3_" class="st2" d="M100.5,49.6c-2-5.1-5.5-7.1-6.1-10.3c-0.4-1.9,0.7-4.4,2.9-4.8c2.2-0.5,4.4,1.5,5.1,3.1
		C103.8,41,100.4,44.6,100.5,49.6z"/>
	<path id="Particle_1_" class="st3" d="M134.9,63.9c0-5.4-2.4-8.6-1.8-11.8c0.4-1.9,2.3-3.8,4.5-3.4c2.2,0.4,3.5,3.1,3.5,4.8
		C141.2,57.1,136.7,59.2,134.9,63.9z"/>
	<path id="Particle_2_" class="st4" d="M170.5,47.1c-0.3-3.9-2.9-4.3-2-7.4c0.5-1.8,2.6-3.6,4.8-3s3.2,3.4,3.1,5
		C176.1,45.4,172.6,44.1,170.5,47.1z"/>
	<path id="Particle_10_" class="st1" d="M171.7,77.1c3.6-4.1,3.9-8.1,6.4-10.1c1.5-1.2,4.2-1.3,5.6,0.4c1.4,1.7,0.6,4.6-0.5,5.9
		C180.9,76.2,176.1,74.8,171.7,77.1z"/>
	<path id="Particle_4_" class="st5" d="M203.7,86c4.1-3.6,8.1-3.9,10.1-6.4c1.2-1.5,1.3-4.2-0.4-5.6c-1.7-1.4-4.6-0.6-5.9,0.5
		C204.7,76.8,206.1,81.6,203.7,86z"/>
	<path id="Particle_13_" class="st2" d="M221.7,107.9c5.1-2,7.1-5.5,10.3-6.1c1.9-0.4,4.4,0.7,4.8,2.9c0.5,2.2-1.5,4.4-3.1,5.1
		C230.3,111.2,226.7,107.8,221.7,107.9z"/>
	<path id="Particle_11_" class="st3" d="M205,131.4c5.4,0,8.6-2.4,11.8-1.8c1.9,0.4,3.8,2.3,3.4,4.5c-0.4,2.2-3.1,3.5-4.8,3.5
		C211.7,137.6,209.6,133.1,205,131.4z"/>
	<path id="Particle_12_" class="st4" d="M205,169.9c3.9-0.3,4.3-2.9,7.4-2c1.8,0.5,3.6,2.6,3,4.8c-0.6,2.2-3.4,3.2-5,3.1
		C206.6,175.5,208,172,205,169.9z"/>
	<path id="Particle_5_" class="st1" d="M184.6,187.1c4.1,3.6,8.1,3.9,10.1,6.4c1.2,1.5,1.3,4.2-0.4,5.6c-1.7,1.4-4.6,0.6-5.9-0.5
		C185.5,196.3,186.9,191.5,184.6,187.1z"/>
	<path id="Particle_8_" class="st2" d="M155.5,193.1c2,5.1,5.5,7.1,6.1,10.3c0.4,1.9-0.7,4.4-2.9,4.8c-2.2,0.5-4.4-1.5-5.1-3.1
		C152.2,201.7,155.7,198.1,155.5,193.1z"/>
	<path id="Particle_6_" class="st3" d="M129.4,214.1c0,5.4,2.4,8.6,1.8,11.8c-0.4,1.9-2.3,3.8-4.5,3.4c-2.2-0.4-3.5-3.1-3.5-4.8
		C123.1,220.9,127.7,218.8,129.4,214.1z"/>
	<path id="Particle_7_" class="st4" d="M111.3,197.4c0.3,3.9,2.9,4.3,2,7.4c-0.5,1.8-2.6,3.6-4.8,3c-2.2-0.6-3.2-3.4-3.1-5
		C105.8,199.1,109.2,200.4,111.3,197.4z"/>
	<path id="Particle_14_" class="st1" d="M85.6,191.1c-3.6,4.1-3.9,8.1-6.4,10.1c-1.5,1.2-4.2,1.3-5.6-0.4s-0.6-4.6,0.5-5.9
		C76.4,192.1,81.2,193.5,85.6,191.1z"/>
	<path id="Particle_9_" class="st5" d="M73.7,165.1c-4.1,3.6-8.1,3.9-10.1,6.4c-1.2,1.5-1.3,4.2,0.4,5.6c1.7,1.4,4.6,0.6,5.9-0.5
		C72.8,174.3,71.4,169.5,73.7,165.1z"/>
	<path id="Particle_17_" class="st2" d="M55.1,150c-5.1,2-7.1,5.5-10.3,6.1c-1.9,0.4-4.4-0.7-4.8-2.9c-0.5-2.2,1.5-4.4,3.1-5.1
		C46.6,146.7,50.2,150.1,55.1,150z"/>
	<path id="Particle_15_" class="st3" d="M59.4,114.8c-5.4,0-8.6,2.4-11.8,1.8c-1.9-0.4-3.8-2.3-3.4-4.5c0.4-2.2,3.1-3.5,4.8-3.5
		C52.7,108.5,54.8,113.1,59.4,114.8z"/>
	<path id="Particle_16_" class="st4" d="M82.6,93.7c-3.9,0.3-4.3,2.9-7.4,2c-1.8-0.5-3.6-2.6-3-4.8s3.4-3.2,5-3.1
		C81,88.2,79.7,91.6,82.6,93.7z"/>
</g>
<g id="Circle">
	<circle cx="134.7" cy="131.1" r="52"/>
</g>
<path id="Heart_2_" class="st7" d="M131.9,110.7c-6.8-6.3-17.4-6-23.7,0.8c-6.3,6.8-6,17.4,0.8,23.7l14.4,13.5l11.5,10.7l11.5-10.7
	l14.4-13.5c6.8-6.3,7.1-16.9,0.8-23.7c-6.3-6.8-16.9-7.1-23.7-0.8l-2.9,2.7"/>
</svg>
  <h1 id="Thanks">Thanks!</h1>
</div>
<script type="text/javascript">
	
	function addListener() {
  var btn = document.querySelector('#Heart_2_');
  btn.addEventListener("click", restart, false);
}

function restart() {
  var container = document.querySelector('#Layer_1');
  var newContainer = container.cloneNode(true);
  container.parentNode.replaceChild(newContainer, container);
  addListener();
}

addListener();
</script>
	</body>
</html>
